<template>
  <div class="invest">
    <div class="content">
      <div class="left">
        <div class="title">充值到我的钱包</div>
        <div class="hint">云尘付支持商户、子商户以及用户实时充值到账</div>
        <div class="card">
          <img src="@/assets/imgs/checkAccount/invest.png" alt="" />
        </div>
      </div>
      <div class="right">
        <el-form
          :model="form"
          ref="form"
          :rules="ruleForm"
          label-position="top"
        >
          <el-form-item label="充值到渠道">
            <el-select
              v-model="form.payformChannel"
              placeholder="请选择"
              filterable
              class="width512"
              @change="setName"
              disabled
            >
              <el-option
                v-for="(item, index) of channelList"
                :key="index"
                :label="CHANNEL_TYPE[item.channel]"
                :value="item.channel"
              ></el-option>
            </el-select>
          </el-form-item>

          <div class="channel-desc">
            <div class="channel-img">
              <img
                :src="
                  require(`@/assets/imgs/checkAccount/${
                    channelImg[cInfo.channel]
                  }.png`)
                "
              />
            </div>
            <div class="channel-count">
              <div class="tit">可用金额</div>
              <div class="count">¥{{ cInfo.avlBalance }}</div>
            </div>
          </div>

          <el-form-item label="充值金额" prop="fmtPayAmt" class="diyUi">
            <el-input
              title=""
              @keydown.native="inputKeyDown"
              v-model="form.fmtPayAmt"
              placeholder=""
              class="width512"
              type="number"
            >
              <template slot="prepend">¥</template>
            </el-input>
          </el-form-item>

          <el-form-item label="" style="margin-top: 50px">
            <el-button
              class="width120"
              @click="() => this.$backTo('/account/wallet')"
              >返回</el-button
            >
            <el-button type="primary" class="width120" @click="handleSubmit"
              >充值</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { isAmount } from "@/utils/validate";
import { getToken } from "@/utils/public";
export default {
  name: "investVue",
  data() {
    return {
      channelList: [], //渠道列表
      cInfo: {
        channel: "ada",
        avlBalance: 0,
      },
      channelImg: {
        wechat: "c3",
        ali: "c2",
        ada: "c1",
        // yse: "银盛",
        // fuiou: "富友",
      },
      form: {
        payformChannel:"ada"
      },
      ruleForm: {
        fmtPayAmt: [
          {
            required: true,
            message: "请输入充值金额",
            trigger: "change",
          },
          {
            validator: this.checkAmount,
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.$http.get("/api/merchant/settleaccount/wallet").then((res) => {
      if (res.code === "0000") {
        //console.log(res.data.channelInfo);
        this.channelList = res.data.channelInfo;
        // console.log(res.data.channelInfo.filter(item=> item.channel == 'ada'))
        this.getInfo();
      }
    });
    this.getInfo();
  },
  watch: {
    "$store.state.testLine": {
      handler(val) {
        if (this.$route.name == this.$options.name) {
          if (val) {
            this.$store.commit("changeTestMode", true);
          }
        }
      },
    },
    deep: true,
  },
  methods: {
    inputKeyDown(event) {
      const { key } = event;
      const filterValue = ["e", "+", "-"];
      if (filterValue.includes(key)) {
        event.returnValue = false;
        return false;
      }
      return true;
    },
    checkAmount(rule, value, callback) {
      if (!value) {
        callback(new Error("请输入充值金额"));
      } else if (!isAmount(value)) {
        callback(new Error("金额必须为整数或者保留两位小数"));
      } else if (Number(value) > 9999999.99) {
        callback(new Error("超出最大输入限制"));
      } else if (value <= 0) {
        callback(new Error("金额必须大于0"));
      } else {
        callback();
      }
    },
    setBanlance(c) {
      const cInfo = this.channelList.find((item) => item.channel == c);
      this.cInfo = cInfo;
    },

    getToken,
    setName(val) {
      //console.log(val);
      this.setBanlance(val);
    },
    getInfo() {
      const channel = this.$route.query.channel;
      if (channel) {
        this.form.payformChannel = channel;
        this.setBanlance(channel);
      }
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let param = {
            ...this.form,
            goodsDesc: "充值",
          };
          this.$http
            .post("/api/merchant/balanceCharge/add", param)
            .then((res) => {
              if (res.code === "0000") {
                window.open(res.data.cashierUrl);
                setTimeout(() => {
                  this.$router.push("/qiye/orderCenter");
                }, 3000);
              }
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.invest {
  padding: 57px 95px 125px 95px;
  background: #fff;
  min-width: 1200px;
  min-height: 825px;
  border-radius: 20px 0px 0px 0px;

  .width512 {
    width: 440px;
  }
  .content {
    display: flex;
    .left {
      margin-right: 195px;
      .title {
        margin-top: 15px;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1d1c1c;
        margin-bottom: 20px;
      }

      .hint {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
      }

      .card {
        margin-top: 160px;
      }
    }
    .right {
      .channel-desc {
        background: #f6f9fb;
        border-radius: 10px;
        padding: 18px 37px;
        display: flex;
        justify-content: center;
        margin-bottom: 40px;

        .channel-img {
          height: 40px;
          padding-right: 45px;
          border-right: 1px solid #e9e9e9;
        }
        .channel-count {
          height: 40px;
          padding-left: 45px;
          .tit {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #869daa;
          }
          .count {
            font-size: 20px;
            font-family: GothamSSm-Medium, GothamSSm;
            font-weight: 500;
            color: #4f595f;
            // margin-top: 3px;
          }
        }
      }
      .diyUi {
        :deep(.el-form-item__label) {
          padding-bottom: 0;
        }
        :deep(.el-input__inner) {
          border: none;
          border-bottom: 1px solid #f0f0f0;
          height: 70px;
          font-size: 34px;
          font-family: GothamSSm-Book, GothamSSm;
          font-weight: 400;
          color: #1d1c1c;
        }
        :deep(.el-input-group__prepend) {
          border: none;
          background: #fff;
          border-bottom: 1px solid #f0f0f0;
          padding: 0 3px;

          font-size: 34px;
          // font-family: GothamSSm-Book, GothamSSm;
          font-weight: normal;
          color: #666666;
        }
      }
      :deep(.el-form-item--small.el-form-item) {
        margin-bottom: 24px;
      }

      :deep(.el-form-item__content) {
        line-height: 20px;
      }
      :deep(.el-upload .el-upload-dragger) {
        width: 440px;
        height: 100px;
      }
      :deep(.el-icon-upload) {
        margin-top: 20px;
        line-height: 20px;
      }
      :deep(.el-upload__text2) {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }
    }
  }
  :deep(.el-input__inner) {
    line-height: 1px !important;
  }
  :deep(
      input[type="number"]::-webkit-inner-spin-button,
      input[type="number"]::-webkit-outer-spin-button
    ) {
    -webkit-appearance: none;
    margin: 0;
  }
}
</style>
